<template>
	<div>
		<el-select
			@visible-change="selectClose"
			v-model="modelValueLabel"
			:filter-method="selectFilterMethod"
			style="min-width: 180px"
			:size="size"
			:placeholder="placeholderText"
			:filterable="isFilter"
			:collapse-tags="isTag"
			@change="selectChangeMethod"
		>
			<el-option :value="modelValue" style="height: auto; padding: 0">
				<el-tree
					:data="treeData"
					:default-expand-all="isDefaultAll"
					:expand-on-click-node="true"
					:filter-node-method="filterNode"
					:show-checkbox="false"
					:check-strictly="true"
					node-key="id"
					ref="demoTree"
					highlight-current
					:props="defaultProps"
					@node-click="handleCheckChange"
				>
				</el-tree>
			</el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	name: 'index',
	props: {
		// echoObj 可以用于回显，它的值为需要回显的对象，多个时可以使用数组
		echoObj: {},
		// 是否开启搜索
		isFilter: {
			default: true,
		},
		// 尺寸
		size: {
			default: 'mini',
		},
		placeholderText: {
			default: '请选择...',
		},
		isTag: {
			default: true,
		},
		isDefaultAll: {
			default: true,
		},
		// 点击节点是否展开
		expandClickNode: {
			default: false,
		},
		// 字段key，用于取出数据中的名字
		fieldName: {
			default: '',
		},
		// 字段key， 数据中的id
		fieldId: {
			default: '',
		},
		// 数据
		treeData: {
			default: [
				{
					id: 1,
					label: '一级 1',
					children: [
						{
							id: 4,
							label: '二级 1-1',
							children: [
								{
									id: 9,
									label: '三级 1-1-1',
								},
								{
									id: 10,
									label: '三级 1-1-2',
								},
							],
						},
					],
				},
				{
					id: 2,
					label: '一级 2',
					children: [
						{
							id: 5,
							label: '二级 2-1',
						},
						{
							id: 6,
							label: '二级 2-2',
						},
					],
				},
				{
					id: 3,
					label: '一级 3',
					children: [
						{
							id: 7,
							label: '二级 3-1',
						},
						{
							id: 8,
							label: '二级 3-2',
						},
					],
				},
			],
		},
		// 遍历时字段格式化
		defaultProps: {
			default: {
				children: 'children',
				label: 'label',
			},
		},
		// 是否单选
		isSingleChoice: {
			default: true,
		},
	},
	data() {
		return {
			// 实际选中值
			modelValue: [],
			// 下拉框绑定值(选中值名字)
			modelValueLabel: [],
		};
	},
	mounted() {
		if (this.echoObj) {
			if (this.echoObj.length > 0) {
				var ids = [];
				var names = [];
				for (let i = 0; i < this.echoObj.length; i++) {
					ids.push(JSON.parse('this.echoObj[i].' + this.fieldId));
					names.push(JSON.parse('this.echoObj[i].' + this.fieldName));
					this.modelValue.push(this.echoObj[i]);
				}
				this.modelValueLabel = names;
				this.$nextTick(() => {
					this.$refs.demoTree.setCheckedKeys(ids);
				});
			}
		}
	},
	methods: {
		selectClose(bool) {
			if (bool) {
				this.selectFilterMethod('');
			}
		},
		selectFilterMethod(val) {
			// 下拉框调用tree树筛选
			this.$refs.demoTree.filter(val);
		},
		selectChangeMethod(e) {
			var arrNew = [];
			var dataLength = this.modelValue.length;
			var eLength = e.length;
			for (var i = 0; i < dataLength; i++) {
				for (var j = 0; j < eLength; j++) {
					if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
						arrNew.push(this.modelValue[i]);
					}
				}
			}
			// 设置勾选的值
			this.$refs.demoTree.setCheckedNodes(arrNew);
		},
		filterNode(value, data) {
			if (!value) return true;
			// JSON.parse('data.' + this.fieldName)
			return JSON.parse('data.' + this.fieldName).indexOf(value) !== -1;
		},
		handleCheckChange(data, node) {
			if (this.isSingleChoice) {
				this.$refs.demoTree.setCheckedNodes([data]);
				this.modelValueLabel = data.label;
			}
			// 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点
			var arrLabel = [];
			var arr = [];
			this.modelValue = arr.push(data.id);
			this.modelValueLabel = arrLabel.push(data.label);
			if (this.isSingleChoice) {
				if (arr.length === 1) {
					this.$emit('callBackFunc', arr);
				}
			} else {
				this.$emit('callBackFunc', arr);
			}
		},
	},
};
</script>

<style lang="" scoped></style>
